<template>
    <div class="box">

        <span @click="openDialog" class="switch-language">
            
            <img
            class="img"
            src="@/assets/images/switch-language.png"/>
        </span>

        <DialogOfSelectLanguage
        ref="dialog"
        ></DialogOfSelectLanguage>

    </div>
</template>

<script lang="ts" setup>
import { useStore } from '@/stores/counter';
import { onMounted, ref } from 'vue';
import $kt from '@/vueKantboot';
import DialogOfSelectLanguage from './inSwichLanguage/dialogOfSelectLanguage.vue';

let store = useStore();

let dialog=ref();

const openDialog=()=>{
    // 显示多语言的弹框
    dialog.value.open();
}

</script>

<style lang="scss" scoped>
.box {
    display: inline-block;
}

.switch-language {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    height: 30px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 20px;
    padding: 0 10px 0 10px;
}

.switch-language:active {
    background-color: rgba(0, 0, 0, .8);
}

.img {
    width: 20px;
    height: 20px;
    line-height: 30px;
    // 颜色翻转
    filter: invert(100%);
}


</style>